<!--
 * @Author: wjk
 * @Date: 2020-05-11 10:56:39
 * @LastEditors: wjk
 * @LastEditTime: 2020-06-18 15:49:14
 * @description: 点赞动画
 -->
<template>
  <view class="animate-item">
    <image class="animate-place" src="/static/images/zb/icon_list_zan.png" mode="aspectFit" />
    <view v-for="(item, index) in zanList" :key="index" class="animate-item-box" @click.stop.prevent>
      <image class="animate-icon" :src="item.url" :style="{'animation-delay' : 0.3 * index + 's', 'transform': `translateX(${Math.floor(Math.random()*10) - 5}rpx)`}" />
    </view>
  </view>
</template>
<script>
export default {
  props: {
    fromType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      zanList: []
    }
  },
  mounted() {
    // setInterval(() => {
    //   this.addZanAnimate()
    // }, 2000)
    this.addZanAnimate()
  },
  methods: {
    addZanAnimate() {
      for (let index = 0; index < 6; index++) {
        const item = {
          url: `${process.env.VUE_APP_IMAGE_ASSET}/images/zb/zan_icon/icon_0${Math.floor(Math.random() * 9 + 1)}.png`
        }
        this.zanList.push(item)
      }
    }
  }
}
</script>
<style scoped lang="scss">
.animate-item{
  position: absolute;
  bottom: 16rpx;
  right: 26rpx;
  z-index: 1;
  // height: 500rpx;
  // width: 55rpx;
  overflow: visible;
  .animate-place{
    width: 44rpx;
    height: 44rpx;
  }
  .animate-item-box{
    position: absolute;
    z-index: -1;
    bottom: 20rpx;
    left: 2rpx;
  }
  .animate-icon{
    width: 40rpx;
    height: 40rpx;
    opacity: 1;
    transition-timing-function: ease-in-out;
    animation: animate-item 2s infinite linear;
    // visibility: visible;
    @keyframes animate-item{
      0%{transform:translateY(0deg);}
      25%{transform: translateX(-13rpx) translateY(-50rpx); opacity: 0.8;}
      50%{transform: translateX(13rpx) translateY(-100rpx); opacity: 0.6;}
      75%{transform: translateX(-15rpx) translateY(-150rpx); opacity: 0.4;}
      100%{transform: translateX(15rpx) translateY(-200rpx); opacity: 0.2;}
    }
  }
}
</style>
